<template>
  <div class="attackDefenseContent">
    <el-form :model="record" :inline="true">
      <el-form-item label="">
        <el-checkbox v-model="record.status" true-label='on' false-label='off'>{{$t('启动本地日志存储')}}</el-checkbox>
      </el-form-item>
      <el-form-item :label="$t('存储日志级别')">
        <el-select v-model="record.lv" placeholder="" ref="recordLv" size='small' style="margin-right:20px;">
          <el-option v-for="(item,index) in levelList" :id="`syslog-config${index}`" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('存储日志保留时间')">
        <el-select v-model="record.keep_time" ref="keepTime" placeholder="" size='small' style="margin-right:20px;">
          <el-option v-for="(item,index) in timeList" :id="`syslog-keep_time${index}`" :key="item.value" :label="$t(item.label)" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('存储日志保留空间')">
        <el-select v-model="record.keep_free" ref="keepFree" placeholder="" size='small' style="margin-right:20px;">
          <el-option v-for="(item,index) in freeList" :id="`syslog-keep_free${index}`" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('端口转换服务')">
        <el-select v-model="record.port_service_switch" ref="portServiceSwitch" placeholder="" size='small' style="margin-right:20px;">
          <el-option v-for="(item,index) in industryList" :id="`syslog-port_service_switch${index}`" :key="item.value" :label="$t(item.label)" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item :label="$t('日志分区预留空间')">
        <el-input v-emoji v-model="record.keep_free" class="attackDefenseContentInput" style="width:100px;" :disabled='true' size='small'></el-input>
        <el-tooltip class="iecTooltip" effect="light" popper-class='syslogTip' :content="$t('提示信息：调整告警阀值（系统管理 -> 告警 -> 告警策略 -> 硬盘空间）可以调整预留空间，日志分区可使用空间小于预留空间，会自动删除部分最早时间的日志')" placement="top">
          <i class="el-icon-warning iecWarningIcon"></i>
        </el-tooltip>
      </el-form-item> -->
      <el-button type="primary" @click="logSave" size="small" class="preser">{{$t('保 存')}}</el-button>
    </el-form>
    <el-row :gutter="20" v-if="configList.length">
      <el-col :span="6" v-for="item in configList" :key="item.mode">
        <span class='attackDefenseTitle'>{{ $t(modeList[item.mode]) }}</span>
        <div class='attackDefenseSwitch'>
          <el-switch :width="lang === 'zh'?60:70" v-model="item.status" @change="protectAllChange(item.status, item.mode)" class="protectAll switch" :disabled='disabledChange(item)' active-color="#009966" inactive-color="#CCCCCC" active-value="on" inactive-value="off" :active-text="$t('启用')" :inactive-text="$t('停用')">
          </el-switch>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getLogInfo, getLogModelInfo, editLogModel, editLog } from '@/api/system/log'
import { selectClass } from '@/utils/input-class.js'
export default {
  name: 'SyslogConfig',
  data () {
    return {
      lang: this.$i18n.locale,
      record: {
        count: 0,
        keep_time: '',
        keep_free: '',
        lv: '',
        status: 'on',
        port_service_switch: ''
      },
      configList: [],
      industryList: [
        { value: 'on', label: '开启' },
        { value: 'off', label: '关闭' }
      ],
      modeList: {
        cli: '命令行',
        mgmt_log: '管理日志',
        AccessControl_dp: '访问控制',
        attack_defense_dp: '异常报文攻击防御',
        content_filter_dp: '深度过滤',
        ddos_defense_dp: 'FLOOD攻击防御',
        av_policy_dp: '病毒过滤',
        ips_policy_dp: '入侵防御',
        url_filter_dp: 'URL过滤',
        ip_mac_dp: 'IP-MAC绑定',
        snat_dp: 'SNAT',
        dnat_dp: 'DNAT',
        mgmt_defense_dp: '自身防护',
        blacklist_dp: '黑名单拦截日志'
      },
      levelList: [
        { value: 1, label: 'ERROR' },
        { value: 2, label: 'ALERT' },
        { value: 3, label: 'INFO' },
        { value: 4, label: 'DEBUG' }
      ],
      timeList: [
        // { value: 1, label: '1个月' },
        // { value: 2, label: '2个月' },
        // { value: 3, label: '3个月' },
        // { value: 4, label: '4个月' },
        // { value: 5, label: '5个月' },
        { value: 6, label: '6个月' },
        { value: 7, label: '7个月' },
        { value: 8, label: '8个月' },
        { value: 9, label: '9个月' },
        { value: 10, label: '10个月' },
        { value: 11, label: '11个月' },
        { value: 12, label: '12个月' }
      ],
      freeList: [
        { value: 20, label: '20%' },
        { value: 30, label: '30%' },
        { value: 40, label: '40%' },
        { value: 50, label: '50%' },
        { value: 60, label: '60%' },
        { value: 70, label: '70%' },
        { value: 80, label: '80%' }
      ]
    }
  },
  created () {
    getLogModelInfo().then(res => {
      if (res.status === 0) {
        this.configList = []
        for (let item of res.info) {
          this.configList.push({ mode: item.mode, status: item.status })
        }
      }
    })
    getLogInfo().then(res => {
      if (res.status === 0) {
        this.record = Object.assign(this.record, res.info[0])
        // this.record.keep_free = res.info[0].keep_free + '%'
      }
    })
  },
  mounted () {
    this.$nextTick(() => {
      const selectData = ['recordLv', 'keepTime', 'keepFree', 'portServiceSwitch']
      selectClass(this.$refs, selectData)
    })
  },
  methods: {
    protectAllChange (status, mode) {
      editLogModel({ mode: mode, status: status })
      if (mode === 'mgmt_log' && status === 'off') {
        for (let item of this.configList) {
          if (item.mode === 'cli' && item.status === 'on') {
            editLogModel({ mode: item.mode, status: 'off' })
            item.status = 'off'
          }
        }
      }
    },
    disabledChange (row) {
      if (row.mode === 'cli') {
        for (let item of this.configList) {
          if (item.mode === 'mgmt_log' && item.status === 'off') {
            return true
          }
        }
      }
      return false
    },
    logSave () {
      editLog(this.record).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t('保存成功'),
            type: 'success'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.attackDefenseContent {
  margin-top: 15px;
  margin-left: 30px;
  line-height: 40px;

  .el-col {
    width: 330px;
    margin-right: 3px;
    margin-bottom: 3px;
    background-color: #eeeeee;
  }

  .el-row {
    max-width: 1370px;
  }
}

.attackDefenseTitle {
  width: 220px;
  margin-left: 10px;
  display: inline-block;
}
.attackDefenseSwitch {
  width: 70px;
  text-align: right;
  display: inline-block;
}
</style>
<style lang="less">
.syslogTip {
  width: 200px;
}
</style>
